<!-- 导航工具栏 -->
<template>
	<view :style="{
			width: position != 'static' ? wininfo.windowWidth - offsetLeft * 2 + 'px' : 'auto',
			left: position != 'static' ? offsetLeft + 'px' : '0px',
			top: position == 'top' ? top_px + 'px' : 'auto',
			bottom: position == 'bottom' ? bottom_px + 'px' : 'auto'
		}" class="tm-bottomnavigation py-10" :class="[
			black_tmeme ? 'grey-darken-4' : '',
			black_tmeme ? 'bk' : '',
			'round-' + round,
			bgTheme,
			position,
			border === 'top' ? 'border-t-1' : '',
			border === 'bottom' ? 'border-b-1' : '',
			'sheetIDX'
		]">
		<view :style="{ background: bgColor }" class=" flex-between ">

			<block v-for="(item, index) in listDate" :key="index">
				<view :style="{
						width: listLen + '%'
					}" class="flex-center" :key="index" :class="[slectedIndx == index && ani == true ? ` ani ` : ``]">
					<tm-button :key="index" titl height="100%" :width="btnwidth"
						:iconSize="item['iconSize'] ? item['iconSize'] : 38"
						:fontSize="item['fontSize'] ? item['fontSize'] : 20" :vertical="vertical" :icon="item.icon"
						:label="item.value" block :theme="slectedIndx == index ? iconColor : iconColorGrey"
						:black="black_tmeme" @click.stop="onclick($event, index)" itemeClass="noGutter  "
						:font-color="slectedIndx == index ? iconColor : iconColorGrey">
						<template v-slot:icon="{ data }">
							<!-- #ifdef MP -->
							<text v-if="false">{{offsetLeft}}</text>
							<!-- #endif -->
							<view style="height: 52upx;">
								<view v-if="!item['custom']">
									<tm-badges :color="iconColor" v-if="item.showDot && vertical" value="item.num"
										:offset="[-10, 0]" :dot="item.dot"></tm-badges>
									<tm-badges :color="iconColor" v-if="item.showDot && !vertical" value="item.num"
										:offset="[-10, 0]" :dot="item.dot"></tm-badges>
									<tm-icons :black="black_tmeme"
										:color="slectedIndx == index ? iconColor : iconColorGrey" :size="data.size"
										:name="data.icon"></tm-icons>
								</view>
								<view v-if="item['custom'] === true"
									class="tm-bottomnavigation-custom absolute flex-center" :style="{
										width: '100%',
										height: '100%',
										minHeight: '100%',
										top: '-50%',
										left: '0',
										flexShrink: 0
									}">
									<view
										:class="[item['customColor'] ? item['customColor'] : bgColor, black_tmeme ? 'bk' : '']"
										style="width: 90upx;height: 90upx;" class="rounded red flex-center">
										<tm-icons :black="black_tmeme" :color="item['customFontColor'] || iconColorGrey"
											:size="data.size" :name="data.icon"></tm-icons>
									</view>
								</view>
							</view>
						</template>
						<template v-slot:default="{data}">
							<text :class="[slectedIndx == index ? 'ani' : '']">{{ data }}</text>
						</template>
					</tm-button>
					
				</view>
			</block>

		</view>
		<!-- 安全区域的高度。 -->
		<view v-if="safe" class="safe--hei" :style="{ height: safeBottomeHeight + 'px' }"></view>
	</view>

	<!-- 	
	list:[{...}],基础属性为：{icon:"图标或者图片",value:"标题"}
	全部属性为（除了上述基本两个属性，其它全为可选。）：
	{
		icon: 'icon-user-fill',
		value: '个人中心',
		iconSize: 38,
		fontSize: 20,
		showDot:false,//是否显示角标。
		dot:{
			dot:false,//是否显示点。如果是点，则不显示Num
			num:"",//是否显示数字。
			ico:"",//是否显示图标，优先级高于dot,num.
		},
		path: ''
	}
-->
</template>

<script>
	/**
	 * 底部导航工具条
	 * @property {Array} list = [] 默认：[],基本属性：{icon:"图标或者图片",value:"标题"}，
	 * @property {String} bg-theme = [] 默认："white",背景颜色主题名称
	 * @property {String | Boolean} black = [true|false] 默认：null,暗黑模式。
	 * @property {String} bg-color = [] 默认：'',自定义背景颜色。
	 * @property {String} icon-color = [] 默认：使用主题色,项目默认激活色。
	 * @property {String} icon-color-grey = [] 默认：使用主题色,项目失去焦点时的颜色。
	 * @property {String} position = [bottom|top|static] 默认：bottom,可选位置：bottom|top|static
	 * @property {Number|String} top = [] 默认：0,距离顶部的距离：只有在position=='top'使用
	 * @property {Number|String} bottom = [] 默认：0,距离底部的距离：只有在position=='bottom'使用
	 * @property {String} border = [top|bottom] 默认：top,显示上边线还是下边线。可选top / bottom
	 * @property {String|Boolean} vertical = [true|false] 默认：true,文字方向：默认是竖向。否则为横向。
	 * @property {String|Number} offset-left = [] 默认：0,偏移量。即离左边的间距。如果提供，自动居中出现两边间隙。
	 * @property {String|Boolean} safe = [true|false] 默认：true,// 是否开启底部安全区域。
	 * @property {String|Boolean} auto-selected = [true|false] 默认：true,// 是否开启自动匹配页面选中底部按钮。
	 * @property {Function} change 切换按钮时触发。
	 *
	 */

	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components: {
			tmButton,
			tmIcons
		},
		name: 'tm-bottomnavigation',
		props: {
			list: {
				Array,
				default: () => {
					return [];
				}
			},
			// 背景颜色主题名称
			bgTheme: {
				type: String,
				default: 'white'
			},
			// 是否启用暗黑主题。
			black: {
				type: String | Boolean,
				default: null
			},
			// 背景颜色，自定义。
			bgColor: {
				type: String,
				default: ''
			},

			// 自定义项目文字默认激活色。
			iconColor: {
				type: String,
				default: 'primary'
			},
			// 自定义项目文字默认失去焦点色。
			iconColorGrey: {
				type: String,
				default: 'grey-lighten-1'
			},
			// 可选bootom / top / static
			position: {
				type: String,
				default: 'bottom'
			},
			// 距离顶部的距离。默认是0,只有在position=='top'使用
			top: {
				type: Number | String,
				default: 0
			},
			// 距离顶部的距离。默认是0,只有在position=='bottom'使用
			bottom: {
				type: Number | String,
				default: 0
			},
			// 显示上边线还是下边线。可选top / bottom
			border: {
				type: String,
				default: 'top'
			},
			// 文字方向：默认是竖向。否则为横向。
			vertical: {
				type: String | Boolean,
				default: true
			},
			// 只支持圆角主题。如round-5
			round: {
				type: String | Number,
				default: 0
			},
			// 偏移量。即离左边的间距。如果提供，整个navbar的宽度会是100% - offsetLeft*2。
			offsetLeft: {
				type: String | Number,
				default: 0
			},
			// 是否开启底部安全区域。
			safe: {
				type: String | Boolean,
				default: true
			},
			// 是否开启点按动画，默认开启。
			ani: {
				type: String | Boolean,
				default: true
			},
			// 是否自动匹配页面选中底部按钮？
			autoSelected: {
				type: String | Boolean,
				default: true
			}
		},
		computed: {

			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			top_px: function() {
				return this.top;
			},
			bottom_px: function() {
				return this.bottom;
			},

			wininfo: function() {
				return uni.getSystemInfoSync();
			},
			listLen: function() {
				if (this.listDate.length == 0) return 1;
				return 100 / this.listDate.length;
			}
		},
		created() {
			uni.hideTabBar({
				animation:false
			})
		},
		data() {
			return {
				slectedIndx: -1, //默认激活的值。
				btnwidth: 0,
				safeBottomeHeight: '0',
				listDate: []
			};
		},
		async mounted() {
			let t = this;
			this.$nextTick(function() {
				let qr = uni.createSelectorQuery().in(this);
				qr.select('.sheetIDX')
					.boundingClientRect()
					.exec(e => {
						t.btnwidth = e[0].width / 5 + 'px';
						t.safeBottomeHeight = uni.getSystemInfoSync().safeAreaInsets.bottom;
						t.listItem();
					});
			});
			this.$nextTick(function() {});
		},
		methods: {
			autoxz(){
				if(!this.autoSelected) return;
				let cr = getCurrentPages();
				let pageRoute = cr[cr.length-1].route;
				if(pageRoute[0]!='/') pageRoute='/'+pageRoute;
				let index=-1;
				for(let i=-1;i<this.listDate.length;i++){
					if(this.listDate[i]?.path == pageRoute){
						index = i;
						break;
					}
				}
				if(index>-1){
					this.slectedIndx = index;
					this.$emit('change', {
						index: index,
						item: this.listDate[index]
					});
				}
			},
			async listItem() {
				let mod = {
					icon: 'icon-user-fill',
					value: '个人中心',
					iconSize: 38,
					fontSize: 20,
					showDot: false, //是否显示角标。
					dot: {
						dot: false, //是否显示点。如果是点，则不显示Num
						num: '', //是否显示数字。
						ico: '' //是否显示图标，优先级高于dot,num.
					},
					path: '',
					openType:'switchTab'
				};

				this.$nextTick(function() {
					let tm = [];
					let ls = this.$tm.deepClone(this.list);
					ls.forEach((item, index) => {
						tm.push({
							...mod,
							...item
						});
					});
					this.listDate = tm;
					this.autoxz();
				});
			},
			onclick(e, index) {
				this.slectedIndx = index;
				let item = this.listDate[index];

				this.$emit('change', {
					index: index,
					item: item
				});
				if (item['path']) {
					switch (item['openType']) {
						case 'switchTab':
							uni.switchTab({
								url: item.path
							})
							break;
						case 'redirect':
							uni.redirectTo({
								url: item.path
							})
							break;
						case 'reLaunch':
							uni.reLaunch({
								url: item.path
							})
							break;
						case 'navigateBack':
							uni.navigateBack({
								url: item.path
							})
							break;
						default:
							uni.navigateTo({
								url: item.path
							})
							break;
					}
				}
			}
		}
	};
</script>
<style>
	page,
	body {
		padding-bottom: 167upx;
	}
</style>
<style lang="scss" scoped>
	.tm-bottomnavigation {
		animation: scalse 0.4s linear;

		&.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 450;
		}

		&.top {
			position: fixed;
			z-index: 450;
			top: 0;
			left: 0;
		}
	}

	.ani {
		animation: scalse 0.4s linear;
	}

	@keyframes scalse {
		0% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
